<!--  -->
<template>
  <div class="mychartcontent">
    <div class="typedialog noprint">
      <el-tooltip class="item" effect="dark" content="标题组件" placement="bottom" style="margin:0 5px">
        <img
          src="../../assets/images/title.png"
          width="30px"
          height="30px"
          @click="typedialog=false;addtitledialog=true;addtitleblocktext=''"
        />
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="图表组件" placement="bottom" style="margin:0 5px">
        <img
          src="../../assets/images/charttype.png"
          width="30px"
          height="30px"
          @click="typedialog=false;adddialog=true;chartpwd=''"
        />
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="文字组件" placement="bottom" style="margin:0 5px">
        <img
          src="../../assets/images/wordtype.png"
          width="30px"
          height="30px"
          @click="typedialog=false;addworddialog=true;addwordblocktitle=''"
        />
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="下载报表" placement="bottom" style="margin:0 5px">
        <img
          src="../../assets/images/reportdownload.png"
          width="30px"
          height="30px"
          @click="handleprint"
        />
      </el-tooltip>
    </div>
    <div :class="`mydirectory ${showdirecorty?'showdirecorty':'hidedirectory'} noprint ` ">
      <div @click="setshowdirectory" class="directory">
        <div>目</div>
        <div>录</div>
      </div>
      <!-- <div class="title">
        <div class="line"></div>
        <h1 id="idtop">目 录</h1>
        <div class="line"></div>
      </div>-->
      <div class="directorylist">
        <div
          :class="`directoryitem ${item.type==15?'firsttitle':item.type==16?'secondtitle':'thirdtitle'}`"
          v-for="(item,index) in directorylist"
          :key="index"
        >
          <a @click="scrolltoview(item.title)">{{item.number}} {{item.title}}</a>
        </div>
      </div>
    </div>

    <div class="contentitem" v-for="(item,index) in blockdata" :key="index" id="pdfDom">
      <div style="text-align:center;font-size:26px;margin-top:20px" v-if="index==0">{{contenttitle}}</div>
      <div
        :class="`blockitem`"
        v-for="(blockitem,blockindex) in item.content"
        :key="blockindex"
        :style="{'justify-content':blockitem.position=='center'?'center':blockitem.position=='right'?'flex-end':blockitem.position=='left'?'flex-start':''
        ,height:(blockitem.height*100)+'%',width:'100%'}"
        @click="chooseblock(item,blockitem,blockindex)"
      >
    
        <LineChartBlock
          :style="{width:(blockitem.width*100)+'%',height:'100%','box-shadow':blockitem.ifchoose? `0 0 15px #5aa2e3`:''}"
          :chartData="blockitem.chartData"
          :theme="custheme"
          :changesizewidth="blockitem.width"
          :changesizeheight="blockitem.height"
          :title="blockitem.title"
          v-if="blockitem.type==1"
        ></LineChartBlock>
        <RingChartBlock
          :style="{width:(blockitem.width*100)+'%',height:'100%','box-shadow':blockitem.ifchoose? `0 0 15px #5aa2e3`:''}"
          :chartData="blockitem.chartData"
          :theme="custheme"
          :changesizewidth="blockitem.width"
          :changesizeheight="blockitem.height"
          :title="blockitem.title"
          v-if="blockitem.type==2"
          :ringwidth="blockitem.height*1263"
        ></RingChartBlock>
        <PieChartBlock
          :style="{width:(blockitem.width*100)+'%',height:'100%','box-shadow':blockitem.ifchoose? `0 0 15px #5aa2e3`:''}"
          :chartData="blockitem.chartData"
          :theme="custheme"
          :changesizewidth="blockitem.width"
          :changesizeheight="blockitem.height"
          :title="blockitem.title"
          v-if="blockitem.type==3"
          :ringwidth="blockitem.height*1263/1.05"
        ></PieChartBlock>
        <HistogramChartBlock
          :style="{width:(blockitem.width*100)+'%',height:'100%','box-shadow':blockitem.ifchoose? `0 0 15px #5aa2e3`:''}"
          :chartData="blockitem.chartData"
          :theme="custheme"
          :changesizewidth="blockitem.width"
          :changesizeheight="blockitem.height"
          :title="blockitem.title"
          v-if="blockitem.type==4"
        ></HistogramChartBlock>
        <BarChartBlock
          :style="{width:(blockitem.width*100)+'%',height:'100%','box-shadow':blockitem.ifchoose? `0 0 15px #5aa2e3`:''}"
          :chartData="blockitem.chartData"
          :theme="custheme"
          :changesizewidth="blockitem.width"
          :changesizeheight="blockitem.height"
          :title="blockitem.title"
          v-if="blockitem.type==5"
        ></BarChartBlock>
        <swiper
          :style="{width:(blockitem.width*100)+'%',height:'100%','box-shadow':blockitem.ifchoose? `0 0 15px #5aa2e3`:''}"
          :chartData="blockitem.chartData"
          :title="blockitem.title"
          :colors="custheme.color"
          :lineNum="Math.floor((blockitem.height*1263-42)/30)>blockitem.chartData.rows.length?blockitem.chartData.rows.length:Math.floor((blockitem.height*1263-42)/30)"
          v-if="blockitem.type==6"
          :ifmove="false"
        ></swiper>
        <TextBlock
          :style="{width:(blockitem.width*100)+'%',height:'100%'}"
          v-if="blockitem.type==7"
          :fontstyle="blockitem.fontstyle"
          :title="blockitem.title"
          :ifchoose="blockitem.ifchoose"
          :width="blockitem.width"
          :fontsize="blockitem.fontstyle.fontsize"
          @changetextheight="changetextheight"
          :id="blockitem.id"
        ></TextBlock>

        <WordCloudBlock
          :style="{width:(blockitem.width*100)+'%',height:'100%','box-shadow':blockitem.ifchoose? `0 0 15px #5aa2e3`:''}"
          :chartData="blockitem.chartData"
          :title="blockitem.title"
          :theme="custheme"
          :colors="custheme.color"
          v-if="blockitem.type==8"
        ></WordCloudBlock>

        <ImageBlock
          :style="{width:(blockitem.width*100)+'%',height:'100%'}"
          v-if="blockitem.type==9"
          :title="blockitem.title"
          :ifchoose="blockitem.ifchoose"
        ></ImageBlock>
        <!-- 瀑布图 -->
        <WaterFallChartBlock
          :style="{width:(blockitem.width*100)+'%',height:'100%','box-shadow':blockitem.ifchoose? `0 0 15px #5aa2e3`:''}"
          :chartData="blockitem.chartData"
          :theme="custheme"
          :title="``"
          v-if="blockitem.type==11"
          :ifchoose="blockitem.ifchoose"
        ></WaterFallChartBlock>
        <!-- 漏斗图 -->
        <FunnelChartBlock
          :style="{width:(blockitem.width*100)+'%',height:'100%','box-shadow':blockitem.ifchoose? `0 0 15px #5aa2e3`:''}"
          :chartData="blockitem.chartData"
          :theme="custheme"
          :title="``"
          v-if="blockitem.type==12"
          :ifchoose="blockitem.ifchoose"
        ></FunnelChartBlock>
        <!-- 散点图 -->
        <ScatterChartBlock
          :style="{width:(blockitem.width*100)+'%',height:'100%','box-shadow':blockitem.ifchoose? `0 0 15px #5aa2e3`:''}"
          :chartData="blockitem.chartData"
          :theme="custheme"
          :title="``"
          v-if="blockitem.type==13"
          :ifchoose="blockitem.ifchoose"
        ></ScatterChartBlock>

        <TitleBlock
          :style="{width:(blockitem.width*100)+'%',height:'100%'}"
          v-if="blockitem.type==15||blockitem.type==16||blockitem.type==17"
          :titletype="blockitem.type"
          :title="blockitem.title"
          :titlenumber="blockitem.titlenumber"
          :ifchoose="blockitem.ifchoose"
          :id="`id${blockitem.title}`"
        ></TitleBlock>

        <!-- 旭日图 -->
        <SunburstBlock
          :style="{width:(blockitem.width*100)+'%',height:'100%','box-shadow':blockitem.ifchoose? `0 0 15px #5aa2e3`:''}"
          :chartData="blockitem.chartData"
          :theme="custheme"
          :title="``"
          v-if="blockitem.type==21"
        ></SunburstBlock>
      </div>
    </div>
    <el-card class="box-card noprint" v-if="currentblockitem.ifchoose!=false&&currentblockitem!=''">
      <div class="showcurrentblockitem">
        <div class="itemkey">
          <span>宽度</span>
        </div>
        <div class="itemvalue">{{currentblockitem.width*892.5 | numFilter}} px</div>
      </div>

      <div class="showcurrentblockitem">
        <div class="itemkey">
          <span>高度</span>
        </div>
        <div class="itemvalue">{{currentblockitem.height* 1263 | numFilter}} px</div>
      </div>

      <!-- 数据源 -->
      <div class="editblocktitle" style="border-top:0">数据源</div>
      <el-select
        v-model="currentblockitem.chartid"
        placeholder="请选择数据源"
        @change="editblockdata(currentblockitem.totalchartdata,currentblockitem.chartid)"
        size="small"
        style="width:100%"
        v-if="currentblockitem.type!=7&&currentblockitem.type!=9&&currentblockitem.type!=15&&currentblockitem.type!=16&&currentblockitem.type!=17"
      >
        <el-option
          v-for="item in currentblockitem.totalchartdata"
          :key="item.id"
          :label="item.id"
          :value="item.id"
        ></el-option>
      </el-select>

      <el-input
        type="textarea"
        :autosize="{ minRows: 2}"
        placeholder="请输入内容"
        v-model="currentblockitem.title"
        style="margin-top:10px;width:100%"
        v-if="currentblockitem.type==15||currentblockitem.type==16||currentblockitem.type==17"
      ></el-input>
      <div v-if="currentblockitem.type==7">
        <p
          v-html="currentblockitem.title"
          style="margin-top:10px;overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;"
        >{{currentblockitem.title}}</p>
        <el-button
          size="small"
          type="primary"
          style="margin:10px auto;width:80%"
          @click="settextdialog =true"
        >编辑内容</el-button>
      </div>

      <div v-if="currentblockitem.type==9">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2,maxRows:3}"
          placeholder="请输入图片网址url"
          v-model="currentblockitem.title"
        ></el-input>
        <!-- <input
          type="file"
          @change="fileChange($event,'edit')"
          ref="referenceUpload"
          style="width:220px"
        />-->
      </div>
      <!-- 移动位置 -->
      <div class="editblocktitle">调整位置</div>
      <el-select v-model="moveposition" placeholder="调整到指定组件下方" size="small" style="width:100%">
        <el-option label="文章头" value="top"></el-option>
        <el-option
          v-for="item in contentdata"
          :key="item.id"
          :label="item.title"
          :value="item.id"
          v-html="item.title"
        ></el-option>
      </el-select>
      <el-button
        size="small"
        type="primary"
        style="margin:10px auto;width:100%"
        @click="moveblock(currentblockitem.id)"
      >调整</el-button>
      <!-- 样式 -->
      <div class="editblocktitle">样式</div>
      <div class="editblock" v-if="currentblockitem.type<7">
        <div class="edititem">
          <div class="fonttitle">图表</div>
          <div class="fontinput">
            <el-select v-model="currentblockitem.type" placeholder="请选择图表" size="small">
              <el-option
                v-for="item in blocktype"
                :key="item.type"
                :label="item.label"
                :value="item.type"
              ></el-option>
            </el-select>
          </div>
        </div>
      </div>

      <div class="editblock">
        <div class="edititem">
          <div class="fonttitle">宽度</div>
          <!-- <el-input v-model="currentblockitem.width" placeholder="请输入内容"></el-input> -->
          <el-slider
            v-model="currentblockwidth"
            style="width:150px"
            :max="892.5"
            @change="currentblockwidthchange"
            :format-tooltip="formatTooltip"
          ></el-slider>
        </div>
        <div class="edititem" v-if="currentblockitem.type!=7">
          <div class="fonttitle">高度</div>
          <!-- <el-input v-model="currentblockitem.width" placeholder="请输入内容"></el-input> -->
          <el-slider
            v-model="currentblockheight"
            style="width:150px"
            :max="1263"
            @change="currentblockheightchange"
            :format-tooltip="formatTooltip"
          ></el-slider>
        </div>
      </div>
      <div class="editblock" v-if="currentblockitem.type==7">
        <div class="edititem">
          <div class="fonttitle">字体大小</div>
          <div class="fontinput">
            <el-input-number size="mini" v-model="currentblockitem.fontstyle.fontsize"></el-input-number>
          </div>
        </div>
        <!-- 
        <div class="edititem">
          <div class="fonttitle">字体颜色</div>
          <div class="fontinput">
            <el-color-picker v-model="currentblockitem.fontstyle.fontcolor"></el-color-picker>
          </div>
        </div>

        <div class="edititem">
          <div class="fonttitle">字体</div>
          <div class="fontinput">
            <el-select
              v-model="currentblockitem.fontstyle.fontfamily"
              placeholder="请选择字体"
              size="small"
            >
              <el-option
                v-for="item in fontfamilys"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>-->
      </div>

    </el-card>

    <el-dialog title="请选择要添加的组件类型" :visible.sync="typedialog" height="30%"></el-dialog>

    <at-modal v-model="addpicdialog">
      <el-input
        type="textarea"
        autosize
        placeholder="请输入图片网址url"
        v-model="addpicblockurl"
        style="margin-top:10px;width:100%"
        :disabled="inputimageurl"
      ></el-input>
      <input type="file" @change="fileChange" ref="referenceUpload" />
      <!-- 图片上传 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addpicdialog = false;addpicblockurl = ''">取 消</el-button>
        <el-button type="primary" @click="addblock('pic')">确 定</el-button>
      </span>
    </at-modal>
    <at-modal v-model="addworddialog">
      <el-input
        type="textarea"
        placeholder="请输入内容"
        v-model="addwordblocktitle"
        :autosize="{ minRows: 4}"
        style="margin-top:10px;width:100%"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addworddialog = false;">取 消</el-button>
        <el-button type="primary" @click="addblock('word')">确 定</el-button>
      </span>
    </at-modal>
    <at-modal v-model="addtitledialog" title="请添加标题">
      <el-select v-model="addtitletype" placeholder="请选择标题类型" v-if="ifshowfirsttitle">
        <el-option v-for="item in addtitlelist" :key="item.id" :label="item.title" :value="item.id"></el-option>
      </el-select>
      <el-select v-model="addtitletype" placeholder="请选择标题类型" v-else>
        <el-option label="二级标题" value="2"></el-option>
        <el-option label="三级标题" value="3"></el-option>
      </el-select>
      <el-input
        type="textarea"
        :autosize="{ maxRows: 4}"
        placeholder="请输入内容"
        v-model="addtitleblocktext"
        style="margin-top:20px;width:100%"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addtitledialog = false;">取 消</el-button>
        <el-button type="primary" @click="addblock('title')">确 定</el-button>
      </span>
    </at-modal>
    <at-modal v-model="adddialog" title="请选择要添加的数据及图表">
      <el-input
        type="textarea"
        placeholder="请粘贴图表口令"
        :autosize="{ maxRows: 4}"
        v-model="chartpwd"
        style="margin-top:20px;width:100%"
      ></el-input>

      <span slot="footer" class="dialog-footer">
        <el-button @click="adddialog = false;addblocktype='1'">取 消</el-button>
        <el-button type="primary" @click="addblock('chart')">插 入</el-button>
      </span>
    </at-modal>
    <!-- 富文本框 -->
    <at-modal v-model="settextdialog" title="请修改文字样式" style="width:80%">
      <editor-bar v-model="currentblockitem.title" @change="richtextchange"></editor-bar>
      <!--     
      <quill-editor
        v-model="currentblockitem.title"
        ref="myQuillEditor"
        class="editer"
        id="editor"
        @ready="onEditorReady($event)"
      ></quill-editor>-->
      <!-- :options="editorOption" -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="settextdialog = false;">取 消</el-button>
        <el-button type="primary" @click="settextdialog = false;">确 定</el-button>
      </span>
    </at-modal>
  </div>
</template>

<script>
import LineChartBlock from "./BlocksV2/LineChartBlock.vue";
import RingChartBlock from "./BlocksV2/RingChartBlock.vue";
import PieChartBlock from "./BlocksV2/PieChartBlock.vue";
import HistogramChartBlock from "./BlocksV2/HistogramChartBlock.vue";
import BarChartBlock from "./BlocksV2/BarChartBlock.vue";
import Swiper from "./BlocksV2/Swiper.vue";
import WordCloudBlock from "./BlocksV2/WordCloudBlock.vue";
import TextBlock from "./BlocksV2/TextBlock.vue";
import ImageBlock from "./BlocksV2/ImageBlock.vue";
import TitleBlock from "./BlocksV2/TitleBlock.vue";
import FunnelChartBlock from "./BlocksV2/FunnelChartBlock.vue"; //漏斗图
import WaterFallChartBlock from "./BlocksV2/WaterFallChartBlock.vue"; //瀑布图
import ScatterChartBlock from "./BlocksV2/ScatterChartBlock.vue"; //散点图
import SunburstBlock from "./BlocksV2/SunburstBlock.vue"; //旭日图
import { Radio, Divider } from "element-ui";
import { mBack, getToken, back, getCookie } from "../../assets/js/common.js";
import { VueCropper } from "vue-cropper";
import EditorBar from "./Editor";
/**
 * 获取文件后缀
 */
function getFileType(name) {
  var type = "";
  type = name.substr(name.indexOf(".") + 1, name.length);
  return type;
}

export default {
  filters: {
    numFilter(value) {
      let realVal = "";
      if (value) {
        // 截取当前数据到小数点后两位
        realVal = parseFloat(value).toFixed(2);
      } else {
        realVal = "--";
      }
      return realVal;
    }
  },

  data() {
    return {
      htmlTitle: "页面导出PDF文件名",
      addpicblockurl: "",
      addpicdialog: false,
      addwordblocktitle: "",
      addworddialog: false,
      typedialog: false,
      blocktype: [
        {
          label: "折线图",
          type: 1
        },
        {
          label: "环图",
          type: 2
        },
        {
          label: "饼图",
          type: 3
        },
        {
          label: "柱状图",
          type: 4
        },
        {
          label: "条形图",
          type: 5
        }
      ],
      editdataid: "",
      adddataid: "",
      addblocktype: "1",
      currentblockwidth: "",
      currentblockheight: "",
      adddialog: false,
      custheme: [],
      fontfamilys: [
        {
          value: "STFangsong",
          label: "华文仿宋"
        },
        {
          value: "STHeiti",
          label: "华文黑体"
        },
        {
          value: "SimSun",
          label: "宋体"
        },
        {
          value: "Microsoft YaHei",
          label: "微软雅黑"
        },
        {
          value: "KaiTi_GB2312",
          label: "楷体_GB2312"
        },
        {
          value: "PingFang SC",
          label: "苹方"
        }
      ],
      blockdata: [],
      contentdata: [
        {
          id: "301be42d9c4749c1bbcd7d24007ea37e",
          reportid: "1",
          statisticid: null,
          type: 15,
          chartid: null,
          filter: null,
          sort: 0,
          title: "会议室统计要点",
          width: 1,
          height: 0.03,
          position: "left",
          ifchoose: false,
          titlenumber: 1
        },
        {
          id: "301beefwfewfbbcd7d24007ea37e",
          reportid: "1",
          statisticid: null,
          type: 7,
          chartid: null,
          filter: null,
          sort: 0,
          title:
            "统计会议室使用情况主要涉及两个方面，一个来是原始记录，二个是统计结果。一般会议室资源有限，当使用频繁时可能会产生冲突，需要对会议室资源自使用情况进行统计，以安排调配资源。一，在原始记录方面，需要记录可以使用的会议室资源情况：对会议室进行资源记录，比如，会议室位置、百会议室编码、会议室面积（容纳人数）、会议室设备（比如投影、视频会议等）等；还要对会议室可用时间进行统计，比如，可用的开始时间，可用的结束时间；会议室预订状态，预订人（度部门），预订时间（起止），使用时间统计字段。这一部分采用Worksheet设置合理的字段即可解决。二、针对使用情况进行统计。一要分析会议室资源的当前可用情况，能够找到可用的会室，二是分析会议室的使用（空问闲）情况，以充分利用资源。对于这种情况的统计，简单的办法可以采用数据筛选的方式进行统计，复杂一些答的，可以考虑数据透视进行分析。",
          width: 1,
          height: 0.03,
          position: "left",
          ifchoose: false,
          titlenumber: 1,
          fontstyle: {
            fontsize: 16,
            fontcolor: "#000000",
            fontfamily: "SimSun"
          }
        },
        {
          id: "d0895d8bb0bafwe4e90cc802913fccc15",
          reportid: "1",
          statisticid: null,
          type: 9,
          chartid: null,
          filter: null,
          sort: 15,
          title:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588830844014&di=8ee499ac525a520631544f1b5672ac5b&imgtype=0&src=http%3A%2F%2Fwww.yw2005.com%2Fbaike%2Fuploads%2Fallimg%2F160528%2F1-16052Q55002295.jpg",
          width: 0.5,
          height: 0.2,
          position: "center",
          ifchoose: false
        },
        {
          id: "546461c9e0124f3d80df298eef4a3c48",
          reportid: "1",
          statisticid: null,
          type: 15,
          chartid: null,
          filter: null,
          sort: 1,
          title: "关于多媒体会议室使用情况",
          width: 1,
          height: 0.03,
          position: "left",
          titlenumber: 2,
          ifchoose: false
        },
        {
          id: "546461c9e0124f3d80df298eef4a3c48",
          reportid: "1",
          statisticid: null,
          type: 16,
          chartid: null,
          filter: null,
          sort: 1,
          title: "会议室图片",
          width: 1,
          height: 0.03,
          position: "left",
          titlenumber: 2,
          ifchoose: false
        },
        {
          id: "d0895d8bb0bc4a4e90cc802913fccc15",
          reportid: "1",
          statisticid: null,
          type: 9,
          chartid: null,
          filter: null,
          sort: 15,
          title:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588792794238&di=8ea1125ffc4f26c4bdf9d75c5aa61814&imgtype=0&src=http%3A%2F%2Fphoto.16pic.com%2F00%2F03%2F48%2F16pic_348855_b.jpg",
          width: 0.5,
          height: 0.2,
          position: "center",
          ifchoose: false
        },
        {
          id: "546461c9e0124f3d80df298eef4a3c48",
          reportid: "1",
          statisticid: null,
          type: 16,
          chartid: null,
          filter: null,
          sort: 1,
          title: "会议室管理工作分析",
          width: 1,
          height: 0.03,
          position: "left",
          titlenumber: 2,
          ifchoose: false
        },
        {
          id: "a484ed05ea174aa0bd5ba9eab8f5a797",
          reportid: "1",
          statisticid: null,
          type: 7,
          chartid: null,
          filter: null,
          sort: 2,
          title:
            "目前很多大中型企业均采用人工手动方式管理各会议室的日常使用，分配和查询各会议室的使用情况，效率低下，不能及时对各楼层的会议室空闲、预定情况、会议室各种资源状态、后勤保障等都做到了如指掌。",
          width: 1,
          height: 0.12,
          position: "left",
          fontstyle: {
            fontsize: 16,
            fontcolor: "#000000",
            fontfamily: "SimSun"
          },
          ifchoose: false
        },

        {
          id: "c7ea911e513a4da784b14e9a83e9674e",
          reportid: "1",
          statisticid: "1491f0d49ad945a1883fa07a71e3faf9",
          type: 3,
          chartid: "normal",
          filter: null,
          sort: 12,
          title: "会议室使用率",
          width: 1,
          height: 0.24,
          position: "left",
          ifchoose: false,
          totalchartdata: [
            {
              columns: ["职称", "会议室使用率"],
              id: "normal",
              title: " 职称 会议室使用率",
              rows: [
                {
                  职称: "老师B",
                  会议室使用率: 100
                },
                {
                  职称: "老师A",
                  会议室使用率: 88.45
                },
                {
                  职称: "教授",
                  会议室使用率: 84.17
                },
                {
                  职称: "讲师",
                  会议室使用率: 80.83
                },
                {
                  职称: "助教",
                  会议室使用率: 83.5
                },
                {
                  职称: "副教授",
                  会议室使用率: 85.32
                }
              ],
              type: 1
            },
            {
              columns: ["职称", "会议室使用率"],
              id: "scatter",
              title: " 职称 会议室使用率",
              rows: [
                {
                  职称: "老师B",
                  会议室使用率: 100
                },
                {
                  职称: "老师A",
                  会议室使用率: 88.45
                },
                {
                  职称: "教授",
                  会议室使用率: 84.17
                },
                {
                  职称: "讲师",
                  会议室使用率: 80.83
                },
                {
                  职称: "助教",
                  会议室使用率: 83.5
                },
                {
                  职称: "副教授",
                  会议室使用率: 85.32
                }
              ],
              type: 13
            },
            {
              columns: ["职称", "会议室使用率"],
              id: "waterfall_avgSCORE",
              title: " 职称 会议室使用率",
              rows: [
                {
                  职称: "老师B",
                  会议室使用率: 100
                },
                {
                  职称: "老师A",
                  会议室使用率: 88.45
                },
                {
                  职称: "教授",
                  会议室使用率: 84.17
                },
                {
                  职称: "讲师",
                  会议室使用率: 80.83
                },
                {
                  职称: "助教",
                  会议室使用率: 83.5
                },
                {
                  职称: "副教授",
                  会议室使用率: 85.32
                }
              ],
              type: 11
            },
            {
              columns: ["职称", "会议室使用率"],
              id: "funnel_avgSCORE",
              title: " 职称 会议室使用率",
              rows: [
                {
                  职称: "老师B",
                  会议室使用率: 100
                },
                {
                  职称: "老师A",
                  会议室使用率: 88.45
                },
                {
                  职称: "副教授",
                  会议室使用率: 85.32
                },
                {
                  职称: "教授",
                  会议室使用率: 84.17
                },
                {
                  职称: "助教",
                  会议室使用率: 83.5
                },
                {
                  职称: "讲师",
                  会议室使用率: 80.83
                }
              ],
              type: 12
            },
           
          ],
          chartData: {
            columns: ["职称", "会议室使用率"],
            id: "normal",
            title: " 职称 会议室使用率",
            rows: [
              {
                职称: "老师B",
                会议室使用率: 100
              },
              {
                职称: "老师A",
                会议室使用率: 88.45
              },
              {
                职称: "教授",
                会议室使用率: 84.17
              },
              {
                职称: "讲师",
                会议室使用率: 80.83
              },
              {
                职称: "助教",
                会议室使用率: 83.5
              },
              {
                职称: "副教授",
                会议室使用率: 85.32
              }
            ],
            type: 1
          }
        }
      ],
      currentpage: 0,
      ifsetposition: false,
      setpositionindex: 0,
      currentblockitem: "",
      addtitledialog: false,
      addtitleblocktext: "",
      addtitletype: "",
      addtitlelist: [
        {
          id: "1",
          title: "一级标题"
        },
        {
          id: "2",
          title: "二级标题"
        },
        {
          id: "3",
          title: "三级标题"
        }
      ],
      currenttitle1: 0,
      currenttitle2: 0,
      currenttitle3: 0,
      ifshowfirsttitle: true,
      directorylist: [],
      showdirecorty: false,
      settextdialog: false,
      selecttext: "",
      textcolor: null,
      contenttitle: "",
      reportid: "",
      editorOption: {
        modules: {
          toolbar: [
            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色

            ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: "ordered" }, { list: "bullet" }], //列表
            [{ script: "sub" }, { script: "super" }], // 上下标
            ["clean"] //清除字体样式
          ]
        }
      },
      ifsetblockchange: false,
      currentshearblock: "",
      moveposition: "",
      chartpwd: "", //1491f0d49ad945a1883fa07a71e3faf9#normal#3#%5B%7B%22id%22%3A%22ZC%22,%22title%22%3A%22%E8%81%8C%E7%A7%B0%22,%22num%22%3A0,%22in%22%3A%5B%22%E9%9D%9ENull%22%5D,%22lists%22%3A%5B%5D%7D%5D
      inputimageurl: false,
      analysisdata: [
        {
          id: 1,
          title: "多媒体会议室A使用情况",
          chartData: {
            columns: ["日期", "使用次数", "使用人数"],
            rows: [
              { 日期: "5/1", 使用次数: 13, 使用人数: 12 },
              { 日期: "5/2", 使用次数: 35, 使用人数: 23 },
              { 日期: "5/3", 使用次数: 29, 使用人数: 22 },
              { 日期: "5/4", 使用次数: 17, 使用人数: 11 },
              { 日期: "5/5", 使用次数: 37, 使用人数: 21 },
              { 日期: "5/6", 使用次数: 45, 使用人数: 44 }
            ],
            showline: ["使用人数"]
          }
        },
        {
          id: 2,
          title: "会议人员迟到情况",
          chartData: {
            columns: ["会议名称", "实到人数", "应到人数"],
            rows: [
              { 会议名称: "第一周例会", 应到人数: 13, 实到人数: 12 },
              { 会议名称: "第三周例会", 应到人数: 35, 实到人数: 23 },
              { 会议名称: "学习交流分享大会", 应到人数: 29, 实到人数: 22 },
              { 会议名称: "比赛总结", 应到人数: 17, 实到人数: 11 }
            ],
            showline: ["使用人数"]
          }
        },
        {
          id: 3,
          title: "功能会议室209使用情况",
          chartData: {
            columns: ["日期", "使用次数", "使用人数"],
            rows: [
              { 日期: "5-1", 使用次数: 13, 使用人数: 12 },
              { 日期: "5-2", 使用次数: 35, 使用人数: 23 },
              { 日期: "5-3", 使用次数: 29, 使用人数: 22 },
              { 日期: "5-4", 使用次数: 17, 使用人数: 11 },
              { 日期: "5-5", 使用次数: 37, 使用人数: 21 },
              { 日期: "5-6", 使用次数: 45, 使用人数: 44 }
            ],
            showline: ["使用人数"]
          }
        }
      ]
    };
  },

  components: {
    TextBlock,
    LineChartBlock,
    RingChartBlock,
    PieChartBlock,
    HistogramChartBlock,
    BarChartBlock,
    Swiper,
    Radio,
    Divider,
    ImageBlock,
    WordCloudBlock,
    TitleBlock,
    FunnelChartBlock,
    WaterFallChartBlock,
    ScatterChartBlock,
    VueCropper,
    SunburstBlock,
    EditorBar
  },

  created() {
    this.getreport();
  },
  computed: {
    titlenumber: function() {
      switch (this.addtitletype) {
        case "1":
          return parseInt(parseInt(this.currenttitle1) + 1) + "";
        case "2":
          return this.currenttitle1 + "." + (parseInt(this.currenttitle2) + 1);
        case "3":
          return (
            this.currenttitle1 +
            "." +
            this.currenttitle2 +
            "." +
            (parseInt(this.currenttitle3) + 1)
          );
      }
    }
  },
  watch: {},
  methods: {
    richtextchange(val) {},
    fileChange(e, edit) {
      var that = this;
      //上传
      var file = e.target.files[0];
      // 限制只能上传图片
      var fileType = ["jpg", "jpeg", "gif", "png", "bmp"];
      if (fileType.indexOf(getFileType(file.name).toLocaleLowerCase()) < 0) {
        that.$message("请选择图片类型");
        return;
      }
    },
    moveblock(componentId1) {
      let componentId2 = "";
      if (this.moveposition == "top") {
        componentId2 = "";
      } else {
        componentId2 = this.moveposition;
      }

      this.contentdata = this.contentdata.filter(item => {
        return item.id != componentId1;
      });
      let insertindex = "";
      for (let i = 0; i < this.contentdata.length; i++) {
        if (this.contentdata[i].id == componentId1) {
          this.contentdata[i].ifchoose = false;
        }
        if (this.contentdata[i].id == componentId2) {
          insertindex = i;
        }
      }
      this.contentdata.splice(insertindex + 1, 0, this.currentblockitem);

      console.log(componentId1 + " " + componentId2);
      this.solvedata(this.contentdata);
      this.$message("移动成功");
      this.handletitlechange();
      this.currentblockitem = "";

      // this.getreport()
    },
   
    changetextheight(height, id) {
      for (let i = 0; i < this.contentdata.length; i++) {
        if (id == this.contentdata[i].id) {
          this.$set(this.contentdata[i], "height", parseFloat(height) + 0.01);
          this.solvedata(this.contentdata);

          break;
        }
      }
    },
    async getreport() {
      let data = this.contentdata;
      this.contenttitle = "报表";
      this.solvedata(this.contentdata);
      this.handletitlechange(); //给一级二级三级标题赋值（序列号）
    },
    setshowdirectory() {
      this.setdirectory();
      this.showdirecorty = !this.showdirecorty;
    },
    scrolltoview(id) {
      this.$el.querySelector(`#id${id}`).scrollIntoView({
        behavior: "smooth", // 平滑过渡
        block: "start" // 上边框与视窗顶部平齐。默认值
      });
    },
    handletitlechange() {
      this.currenttitle1 = 0;
      this.currenttitle2 = 0;
      this.currenttitle3 = 0;
      this.directorylist = [];
      this.contentdata.map((item, index) => {
        if (item.type == 15 || item.type == 16 || item.type == 17) {
          switch (item.type) {
            case 15:
              this.$set(item, "titlenumber", parseInt(this.currenttitle1) + 1);
              this.currenttitle2 = 0;
              this.currenttitle3 = 0;
              this.currenttitle1 += 1;
              break;
            case 16:
              this.$set(
                item,
                "titlenumber",
                `${this.currenttitle1}.${parseInt(this.currenttitle2) + 1}`
              );
              this.currenttitle2 += 1;
              this.currenttitle3 = 0;

              break;
            case 17:
              this.$set(
                item,
                "titlenumber",
                `${this.currenttitle1}.${this.currenttitle2}.${parseInt(
                  this.currenttitle3
                ) + 1}`
              );
              this.currenttitle3 += 1;
              break;
          }

          // console.log(item.titlenumber);
          // console.log("--------------");
        }
      });
    },

    setdirectory() {
      this.directorylist = [];
      this.contentdata.map((item, index) => {
        if (item.type == 15 || item.type == 16 || item.type == 17) {
          this.directorylist.push({
            title: item.title,
            number: item.titlenumber,
            type: item.type
          });
        }
      });
      this.currentblockitem = "";
    },
    handleprint() {
      var that = this;
      let myPromise = new Promise((resolve, reject) => {
        that.blockdata.map((item, index) => {
          item.content.map(contentitem => {
            contentitem.ifchoose = false;
          });
        });
        resolve("成功!"); //代码正常执行！
      });
      myPromise.then(function(successMessage) {
        window.print();
      });
    },
    editblockdata(totaldata, chartid) {
      let data = {};
      let type = "";
      for (let i = 0; i < totaldata.length; i++) {
        if (totaldata[i].id == chartid) {
          data = totaldata[i];
          type = totaldata[i].type;
          break;
        }
      }
      this.$set(this.contentdata[this.setpositionindex], "type", type);
      this.$set(this.contentdata[this.setpositionindex], "chartData", data);
    },
    currentblockwidthchange() {
      this.$set(
        this.contentdata[this.setpositionindex],
        "width",
        parseFloat((this.currentblockwidth / 892.5).toFixed(2))
      );
      this.solvedata(this.contentdata);
    },
    currentblockheightchange() {
      this.$set(
        this.contentdata[this.setpositionindex],
        "height",
        parseFloat((this.currentblockheight / 1263).toFixed(2))
      );
      this.solvedata(this.contentdata);
    },
    formatTooltip(val) {
      return val + " 像素";
    },

    calculatecurrenttitle() {
      let data = this.contentdata;
      //计算当前标题下标
      for (let i = data.length - 1; i > 0; i--) {
        if (data[i].type == 15 || data[i].type == 16 || data[i].type == 17) {
          this.currenttitle1 = data[i].titlenumber;
          this.currenttitle2 = 0;
          this.currenttitle3 = 0;
          if (data[i].type == 16) {
            this.currenttitle2 = data[i].titlenumber.split(".")[1];
            this.currenttitle3 = 0;
          }
          if (data[i].type == 17) {
            this.currenttitle2 = data[i].titlenumber.split(".")[1];
            this.currenttitle3 = data[i].titlenumber.split(".")[2];
          }
          break;
        }
      }
    },
    solvedata(data, ifsetdirectory) {
      var blockdata = [];
      this.currentpage = 0;
      if (ifsetdirectory) {
        blockdata.push({
          pageid: 0,
          percent: 1,
          directorycontent: this.directorylist
        });
        this.currentpage = 1;
      }

      data.map((item, index) => {
        if (index == 0) {
          blockdata.push({
            pageid: ifsetdirectory ? 1 : 0,
            percent: item.height + 0.1,
            content: [item]
          });
        } else {
          if (blockdata[this.currentpage].percent + item.height > 1) {
            this.currentpage++;
            blockdata.push({
              pageid: this.currentpage,
              percent: 0.05,
              content: []
            });
          }
          blockdata[this.currentpage].content.push(item);
          this.$set(
            blockdata[this.currentpage],
            "percent",
            blockdata[this.currentpage].percent + item.height
          );
        }
      });
      this.blockdata = blockdata;
      return blockdata;
    },
    calculatepageheight(list) {
      var percent = 0;
      list.map((item, index) => {
        percent = 0;
        item.content.map(contentitem => {
          percent += contentitem.height;
        });
        item.percent = percent;
      });
    },
    chooseblock(pageitem, blockitem, blockindex, righttick) {
      if (righttick) {
        this.ifsetblockchange = true;
      } else {
        this.ifsetblockchange = false;
      }
      this.editdataid = blockitem.id;
      this.currentblockitem = blockitem;
      this.currentblockwidth = blockitem.width * 892.5;
      this.currentblockheight = blockitem.height * 1263;
      this.blockdata.map((item, index) => {
        if (!item.directorycontent) {
          item.content.map(contentitem => {
            if (contentitem != blockitem) {
              contentitem.ifchoose = false;
            }
          });
        }
      });
      blockitem.ifchoose = !blockitem.ifchoose;
      if (blockitem.ifchoose) {
        this.ifsetposition = true;
        this.currentpage = pageitem.pageid;
        var count = 0;
        if (this.currentpage != 0) {
          this.blockdata.map((item, index) => {
            if (!item.directorycontent) {
              if (index < this.currentpage) {
                count += item.content.length;
              }
            }
          });
        }
        count += blockindex;
        //  console.log(count);
        this.setpositionindex = count;
      } else {
        this.ifsetposition = false;
        this.currentpage = this.blockdata.length - 1;
      }

      //设置当前选中标题
      if (blockitem.type == 15) {
        let titlenumber = blockitem.titlenumber;
        this.ifshowfirsttitle = true;
        switch (blockitem.titletype) {
          case 1:
            this.currenttitle1 = titlenumber;
            this.currenttitle2 = "0";
            this.currenttitle3 = "0";
            break;
          case 2:
            //判断二级三级中间无法添加一级标题
            //  this.ifaddfirsttitle(blockitem.titlenumber);
            this.currenttitle1 = titlenumber.split(".")[0];
            this.currenttitle2 = titlenumber.split(".")[1];
            this.currenttitle3 = "0";
            break;
          case 3:
            this.currenttitle1 = titlenumber.split(".")[0];
            this.currenttitle2 = titlenumber.split(".")[1];
            this.currenttitle3 = titlenumber.split(".")[2];
            break;
        }
      }
    },
    // ifaddfirsttitle(titlenumber) {
    //   let findstr = titlenumber + ".";
    //   this.contentdata.map((item, index) => {
    //     if (
    //       item.titletype &&
    //       item.titletype == 3 &&
    //       item.titlenumber.indexOf(findstr) != -1
    //     ) {
    //       this.ifshowfirsttitle = false;
    //     }
    //   });
    // },
    showaddblockdialog() {
      this.typedialog = true;
    },
    addblock(type) {
      let that = this;
      var title = "";
      var pushdata = {};
      var showdata = this.blockdata[this.currentpage];
      let positionindex = "";
      //todo 请求接口获取详细信息
      pushdata.id =
        (Math.random() * 10000000).toString(16).substr(0, 4) +
        "-" +
        new Date().getTime() +
        "-" +
        Math.random()
          .toString()
          .substr(2, 5);
      if (type == "word") {
        this.addworddialog = false;
        title = this.addwordblocktitle;
        pushdata = {
          type: 7,
          width: 1,
          height: 0.05,
          position: "left",
          ifchoose: false,
          title: title,
          fontstyle: {
            fontsize: 16,
            fontcolor: "#000000",
            fontfamily: "SimSun"
          }
        };
        this.addwordblocktitle = "";
      } else if (type == "pic") {
        this.addpicdialog = false;
        pushdata = {
          type: 9,
          width: 0.5,
          height: 0.3,
          position: "center",
          ifchoose: false,
          title: this.addpicblockurl
        };
        this.addpicblockurl = "";
      } else if (type == "title") {
        this.addtitledialog = false;
        let titletype = parseInt(this.addtitletype);
        let type = 15;
        switch (titletype) {
          case 1:
            type = 15;
            break;
          case 2:
            type = 16;
            break;
          case 3:
            type = 17;
            break;
        }
        pushdata = {
          type: type,
          width: 1,
          height: titletype == 1 ? 0.03 : titletype == 2 ? 0.02 : 0.018,
          position: "left",
          ifchoose: false,
          title: this.addtitleblocktext,
          titlenumber: this.titlenumber
        };
        this.addtitleblocktext = "";
      }
      //插入图表
      else if (type == "chart") {
        this.adddialog = false;
        let str = this.chartpwd;
        if (str.split("#")[3]) {
          mfilter = str.split("#")[3];
        }
        let totaldata = this.analysisdata; //获取所有的图表列表
        let chartData = totaldata[0].chartData;
        pushdata = {
          type: 1,
          chartData: chartData,
          width: 1,
          height: 0.3,
          position: "center",
          ifchoose: false,
          title: totaldata[0].chartData.title,
          chartid: 1,
          statisticid: null,
          filter: null,
          totaldata: totaldata
        };
        positionindex = that.handleifsetposition(pushdata);
        pushdata.sort = positionindex;
      }
      if (type != "chart") {
        positionindex = that.handleifsetposition(pushdata);
        pushdata.sort = positionindex;
      }
      this.postblock(pushdata, positionindex);
    },

    handleifsetposition(pushdata) {
      //判断是否在指定位置插入数据
      let positionindex = "";
      if (this.ifsetposition) {
        var index = this.setpositionindex;
        positionindex = this.currentblockitem.sort + 1;
        this.contentdata.splice(index + 1, 0, pushdata);
        this.handletitlechange();
        //this.solvedata(this.contentdata);
      } else {
        if (this.contentdata.length == 0) {
          positionindex = 0;
        } else {
          positionindex =
            this.contentdata[this.contentdata.length - 1].sort + 1;
        }
        this.contentdata.push(pushdata);
        this.handletitlechange(); //给一级二级三级标题赋值（序列号）
        this.calculatecurrenttitle();
        this.setdirectory();
      }
      pushdata.sort = positionindex;

      return positionindex;
    },
    postblock(data, positionindex) {
      let that = this;
      let params = this.getpostparams(data, positionindex);
      this.solvedata(this.contentdata);
    },
    handlesort(data, position, id) {
      //对sort为position的增加id
      data.map((item, index) => {
        this.$set(item, "sort", index);
        if (item.sort == position) {
          this.$set(item, "id", id);
        }
      });
    },
    getpostparams(data, positionindex) {
      let json = {
        width: data.width,
        height: data.height,
        position: data.position
      };
      if (data.type == 7) {
        json.fontsize = data.fontstyle.fontsize;
        json.fontcolor = data.fontstyle.fontcolor;
        json.fontfamily = data.fontstyle.fontfamily;
      }
      let params = {
        statisticid: data.statisticid || null,
        type: data.type,
        chartid: data.chartid || null,
        content: data.title,
        filter: data.filter || null,
        sort: positionindex,
        json: JSON.stringify(json)
      };
      return params;
    },
    deleteblock(id) {
      let that = this;
      this.contentdata.splice(this.setpositionindex, 1);
      this.solvedata(this.contentdata);
      this.ifsetposition = false;
    }
  }
};
</script>
<style scoped lang="scss">
.mychartcontent {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgb(233, 233, 233);
  position: relative;
  text-align: left !important;
  .buttongroup {
    position: fixed;
    right: 10px;
    top: 10px;
    z-index: 4;
  }
  .showdirecorty {
    animation: directoryshow 1s forwards;
  }
  .hidedirectory {
    animation: directoryhide 1s forwards;
  }
  @keyframes directoryshow {
    0% {
      left: -200px;
    }
    100% {
      left: 0px;
    }
  }
  @keyframes directoryhide {
    0% {
      left: 0;
    }
    100% {
      left: -200px;
    }
  }
  .mydirectory {
    position: fixed;
    left: -200px;
    padding: 10px 0;
    top: 30px;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    width: 200px;
    height: 90%;
    flex-direction: column;
    text-align: left;
    align-items: flex-start;
    z-index: 99;
    .directory {
      position: absolute;
      right: -50px;
      top: 40px;
      width: 50px;
      height: 80px;
      border-radius: 4px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      background: #409eff;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    .title {
      width: 100%;
      display: flex;
      align-items: center;
      margin-bottom: 30px;
      h1 {
        margin: 0 auto;
      }
      .line {
        flex: 1;
        margin: 0 20px;
        height: 1px;
        background: grey;
      }
    }

    .directorylist {
      width: 90%;
      text-align: left;
      margin: 0 auto;
      .directoryitem {
        margin: 10px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        a {
          white-space: nowrap;
        }
      }
      .firsttitle {
        font-size: 20px;
        font-weight: bold;
        margin: 15px 0;
        a {
          font-weight: bold;
        }
      }
      .secondtitle {
        font-size: 18px;
        font-weight: bold;
        margin-left: 15px;
        a {
          font-weight: bold;
        }
      }
      .thirdtitle {
        font-size: 16px;
        margin-left: 30px;
      }
    }
  }
  .contentitem {
    background: white;
    width: 892.5px;
    height: 1263px;
    margin: 20px 0;
    position: relative;
    padding: 20px 30px;
    .blockitem {
      width: 100%;
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      .exchange {
        position: absolute;
        left: 50%;
        top: 100%;
        transform: translateY(-50%);
        border: 1px solid rgb(228, 228, 228);
        border-radius: 1px;
        background: white;
        z-index: 99;
        .gn {
          padding: 8px 15px;
        }
        .line {
          width: 100%;
          height: 1px;
          background: #ccc;
        }
      }
    }
    .exchangechoose {
      padding: 10px 0;
      animation: setscale 0.5s forwards;
    }
    @keyframes setscale {
      100% {
        transform: scale(1.2);
      }
    }
  }
  .box-card {
    width: 300px;
    position: fixed;
    right: 10px;
    top: 0;

    bottom: 0;
    height: 100%;
    display: flex;
    padding-top: 50px;
    animation: mymove 0.8s;
    overflow-y: scroll;
    -moz-animation: mymove 0.8s; /* Firefox */
    -webkit-animation: mymove 0.8s; /* Safari and Chrome */
    -o-animation: mymove 0.8s; /* Opera */
    .hideBoxcard {
      position: absolute;
      left: 0;
      top: 10px;
      width: 20px;
    }
    @keyframes mymove {
      from {
        right: -220px;
      }
      to {
        right: 10px;
      }
    }

    @-moz-keyframes mymove /* Firefox */ {
      from {
        right: -220px;
      }
      to {
        right: 10px;
      }
    }

    @-webkit-keyframes mymove /* Safari 和 Chrome */ {
      from {
        right: -220px;
      }
      to {
        right: 10px;
      }
    }

    @-o-keyframes mymove /* Opera */ {
      from {
        right: -220px;
      }
      to {
        right: 10px;
      }
    }
    .showcurrentblockitem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ccc;
      font-size: 12px;
      width: 260px;
      margin: 10px 0;
      padding: 5px 2px;
      .blocktype img {
        -webkit-filter: invert(100%); /* Chrome, Safari, Opera */
        filter: invert(100%);
      }
      img {
        width: 20px;
        margin-right: 3px;
      }
      .itemkey {
        display: flex;
        align-items: center;
      }
    }
    .editblocktitle {
      font-size: 14px;
      width: 100%;
      border-top: 1px solid #ccc;
      padding: 20px 2px 10px 2px;
      margin-top: 10px;
      display: flex;
      align-items: center;
      font-weight: bold;
      margin: 20px 0 5px 0;
      img {
        width: 20px;
        margin-right: 5px;
      }
    }
    .editblock {
      .edititem {
        .fonttitle {
          font-size: 14px;
        }
        margin: 10px 0;
        padding: 5px 2px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
  .addblocks {
    font-size: 12px;
    height: 70%;
    .blockcontent {
      display: flex;
      justify-content: space-around;
      overflow-y: scroll;
      .typechoose {
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 60px;
          height: 60px;
          -webkit-filter: invert(100%); /* Chrome, Safari, Opera */
          filter: invert(100%);
          margin-bottom: 10px;
        }
      }
    }
  }
  .typedialog {
    display: flex;
    justify-content: space-around;
    position: fixed;
    right: 0px;
    top: 150px;
    z-index: 4;
    .mtype {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 10px;
      img {
        width: 30px;
        height: 30px;
      }
      span {
        white-space: nowrap;
      }
    }
    .mtype:hover {
      box-shadow: 0 0 15px #5aa2e3;
    }
  }
}
@media print {
  .contentitem {
    page-break-after: always;
  }
}
</style>

<style>
.m-colorPicker .box {
  right: 0;
  width: 220px !important;
}
.demo1-item {
  border: 1px solid #ececec;
  padding: 5px 15px;
}
.demo1-item-selected {
  border: 1px solid #409eff;
}
.el-select-dropdown__item {
  max-width: 260px;
}
.toolbar,
.w-e-text-container {
  border: 1px solid #e4e4e4 !important;
}
.w-e-text-container {
  border-top: 0 !important;
  padding-top: 5px;
}
blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}
table,
td,
tr,
th {
  border: 1px solid #ccc;
}
code {
  display: block;
  width: 100%;
  zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}
</style>

<style type="text/css" media="print">
@media print {
  .noprint,
  .box-card {
    display: none !important;
  }
  .contentitem {
    /* transform: scale(0.89, 0.89);
    -webkit-transform-origin:top; */
    zoom: 0.85;
  }
}
@page {
  margin: 0;
}
@page :left {
  margin-left: 0;
  margin-right: 0;
}
@page :right {
  margin-left: 0;
  margin-right: 0;
}
</style>

